<template>
  <div class="dataContainer">
    <el-form :inline="true" size="small" :model="queryParams" class="demo-form-inline searchContainer">
      <el-form-item label="合约代码: ">
          <el-input v-model="queryParams.instrumentCode" placeholder="请输入合约代码"  @keyup.enter="onSearch"  style="width: 180px;"/>
      </el-form-item>
      <el-form-item label="行情日期: ">
          <el-date-picker
                style="width: 180px;"
                v-model="queryParams.date"
                type="date"
                placeholder="请选择行情日期"
                size="small"
                value-format="YYYY-MM-DD"
            />
      </el-form-item>
      <el-form-item>
        <el-button class="bs-form-btn" size="small" type="primary" @click="onSearch" ><el-icon><Search /></el-icon>查 询</el-button>
        <ResetButton :queryParams="queryParams"/>
        <el-button size="small" type="primary" @click="openAddModal"><el-icon><Plus /></el-icon>新增 </el-button>
      </el-form-item>
    </el-form>
    <!-- Table start -->
    <div >
      <ColumnSetting v-model:columnList="columnList" />
      <el-table
        ref="tableRef"
        v-loading="tableLoading"
        :border="true"
        class="bs-table"
        :data="tableData"
        row-key="id"
        :height="tableHeight"
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{textAlign: 'center'}"
        table-layout='fixed'
      >
        <el-table-column type="index" label="序号" width="80" fixed/>
        <template v-for="item in columnList" :key="item.prop">
          <el-table-column :prop="item.prop" :label="item.label"  :fixed="item.fixed" :sortable:="item.sortable" v-if="!item.hide && item.prop!='action'" :width="item.width">
            <template #default="scope">
              <template v-if="item.prop=='subscriptionFlag'">
                <div v-if="scope.row.subscriptionFlag==1">
                    <el-tag type="primary">是</el-tag>
                </div>
                <div v-else>  
                    <el-tag type="info">否</el-tag>
                </div>
              </template>
              <template v-else>
                {{ scope.row[item.prop] }}
              </template>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" :width="item.width" v-else-if="!item.hide && item.prop=='action'">
               <template #default="scope">
                <el-button  size="small" link type="success"  @click="editRow(scope.row.id)" ><el-icon><Edit /></el-icon> 修改</el-button>
                <el-button  size="small" link type="danger" @click="deleteRow(scope.row.id)" ><el-icon><Delete /></el-icon> 删除</el-button>
              </template>
            </el-table-column>
        </template>
      </el-table>
      <pagination
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        small="small"
        disabled="disabled"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        @pagination="selectByPage"
      />
    </div>
    <AddOrUpdate ref="addOrUpdateRef" @flushTable="selectByPage" />
  </div>
</template>
<script>
import { selectByPage, deleteLastPrice } from '@/api/oss/lastPrice.js'
import { mapState } from 'vuex'
import AddOrUpdate from './addOrUpdate.vue'
export default {
  components:{
    AddOrUpdate
  },
  data() {
      return {
        tableTotal: 0,
        tableLoading: false,
        tableData: [],
        // 查询参数
        queryParams: {
            pageNo: 1,
            pageSize: 500,
            instrumentCode:'',
            date:'',
        },
        columnList:[
            {prop:'instrumentCode',label:'合约代码',sortable:false,sort:1,hide:false,fixed:true,width:130},
            {prop:'date',label:'行情日期',sortable:false,sort:2,hide:false,fixed:true,width:120},
            {prop:'lastPrice',label:'最新价',sortable:false,sort:3,hide:false,fixed:false,width:100},
            {prop:'openInterest',label:'持仓量',sortable:false,sort:4,hide:false,fixed:false,width:100},
            {prop:'tradeVolume',label:'成交量',sortable:false,sort:5,hide:false,fixed:false,width:100},
            {prop:'settlementPrice',label:'结算价',sortable:false,sort:6,hide:false,fixed:false,width:120},
            {prop:'limitUpPrice',label:'涨停价',sortable:false,sort:7,hide:false,fixed:false,width:120},
            {prop:'limitDownPrice',label:'跌停价',sortable:false,sort:8,hide:false,fixed:false,width:120},
            {prop:'topPrice',label:'最高价',sortable:false,sort:9,hide:false,fixed:false,width:100},
            {prop:'bottomPrice',label:'最低价',sortable:false,sort:10,hide:false,fixed:false,width:120},
            {prop:'updateTime',label:'更新时间',sortable:false,sort:10,hide:false,fixed:false,width:200},
            {prop:'action',label:'操作',sortable:false,sort:11,hide:false,fixed:false,width:200},
        ],
        tableHeight:(window.innerHeight - 380) + 'px',
      }
  },
  created() {
  },
  computed:{
      ...mapState(['amplify'])
  },
  mounted(){
      this.$nextTick(()=>{
          this.countTableHeight()
          this.selectByPage()
      })
  },
  methods: {
    deleteRow(id){
        this.$confirm("请确认是否删除 ?", "警告  ! ! !", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
          deleteLastPrice({id:id}).then(res => {
              if (res.code == 1) {
              this.$message.success(res.message)
              // 重新获取数据
              this.onSearch()
              } else {
              this.$message.error(res.message)
              }
          })
        })
    },
    // 打开新增弹窗事件
    openAddModal() {
      this.$refs.addOrUpdateRef.openModal(null)
    },
    editRow(id){
      this.$refs.addOrUpdateRef.openModal(id)
    },
    // 搜索事件
    onSearch() {
        this.queryParams.pageNo = 1
        this.selectByPage()
    },
    // 分页查询事件
    selectByPage() {
        this.tableLoading = true
        selectByPage(this.queryParams).then((res) => {
          this.tableLoading = false
          if (res.code === 1) {
              this.tableData = res.data.records
              this.tableTotal = res.data.total
          }
        }).catch(() => {
            this.tableLoading = false
        })
    },
    // 表格高度
    countTableHeight(){
      let tableHeight = (window.innerHeight - 380) + 'px'
      // 计算搜索区域
      var searchContainerList =  document.getElementsByClassName("searchContainer")
      if (this.arrIsNotEmpty(searchContainerList) && this.arrIsNotEmpty(searchContainerList[0])) {
                let searchContainerHeight = searchContainerList[0].offsetHeight
                // header高度+面包屑高度+tab多标签页高度+tab多标签页底部margin的高度
                let staticHeight = 60+38+30+15
                if (this.amplify == true) {
                    // 放大后 , 就没有头部, 面包屑, tab多标签页了 , 预留70px给空白 , 并预留50px给分页
                    tableHeight = window.innerHeight - searchContainerHeight - 50 - 70 + 'px'
                } else {
                    tableHeight = window.innerHeight - (staticHeight + searchContainerHeight) - 50 - 50 + 'px'
                }
                this.tableHeight = tableHeight
            }
    },
  },
  watch: {
      amplify(newValue,oldValue) {
          this.countTableHeight()
      },
  },
}
</script>
<style lang="css" scoped>
:deep(.el-scrollbar) {
    text-align: left;
}
</style>